<template>
  <div class="qa-list">
    <el-button
      class="qa-btn"
      type="primary"
      size="small"
      icon="el-icon-edit"
      @click="handleQuestion"
      v-if="userId"
      >我要提问</el-button
    >
    <div class="lookme" v-if="userId">
      <i class="el-icon-refresh" @click="getList"> 刷新列表</i>
      <el-switch v-model="isMain" @change="handleSeeMe"> </el-switch>
      <span>只看我的</span>
    </div>
    <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
    <div style="padding: 0 10px">
      <div class="qa-item" v-for="item in tableData" :key="item.id">
        <div class="img-box">
          <el-avatar size="large" :src="headImg(item.sysUser)"></el-avatar>
        </div>
        <div class="qa-info">
          <h2> {{ item.content }} </h2>
          <ul>
            <li v-if="item.childList.length == 0">
              <p style="color: #999">暂无回答</p>
            </li>
            <li
              v-for="(v, i) in item.childList"
              :key="v.id"
              v-show="showArr.includes(item.id) || i == 0"
            >
              <p v-show="i == 0">最新回答</p>
              <div class="user-info">
                <el-avatar size="small" :src="headImg(v.sysUser)"></el-avatar>
                <span class="user-name">{{ v.sysUser.userName }}</span>
                <span class="user-time">{{ v.createTime }}</span>
              </div>
              <div class="user-reply">{{ v.content }}</div>
            </li>
          </ul>
          <el-row :gutter="20" class="qa-other">
            <el-col :span="12">
              <span class="show-answer" @click="handleShowAnswer(item)">
                {{ showArr.includes(item.id) ? '收起回答' : '查看回答' }}（{{
                  item.childList.length
                }}）
              </span>
              <span class="date">{{ item.createTime }}</span>
            </el-col>
            <el-col :span="12">
              <p class="reply-btn" @click="handleReply(item)">
                <span class="el-icon-chat-square"></span>
                <i> 我要回答</i>
              </p>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
    <Question />
    <Answer />
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  components: {
    Question: () => import('./Question.vue'),
    Answer: () => import('./Answer.vue'),
  },
  data() {
    return {
      isMain: false,
      userId: this.$store.getters.userId,
      showArr: [],
      listQuery: {
        pid: '0', //父级节点(评价类型不传)
        resId: '', //资源ID
        type: '1', //节点类型；1-评价，2-回复
        resType: '4', //资源类型；1-课程，2-知识点，3-…
        page: 1,
        limit: 10,
        createBy: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['options'],
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  mounted() {
    this.$bus.$on('refreshAllQAList', () => {
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshAllQAList')
  },
  methods: {
    async getList() {
      let { cId } = this.$route.query
      this.listQuery.resId = cId
      if (this.options) {
        this.listQuery = Object.assign(this.listQuery, this.options)
      }
      let dispatchType = this.userId
        ? 'querySysEvaluate'
        : 'queryOpenApiSysEvaluate'
      let res = await this.$store.dispatch(dispatchType, this.listQuery)
      this.tableData = res.data
      this.pageObj = res
    },
    //我要提问
    handleQuestion() {
      this.$bus.$emit('showDialogQuestion')
    },
    handleSeeMe() {
      this.listQuery.createBy = this.isMain ? this.userId : ''
      this.getList()
    },
    //查看|收起回答
    handleShowAnswer(item) {
      let { id, childList } = item
      if (childList.length <= 1) return
      let idx = this.showArr.indexOf(id)
      idx == -1 ? this.showArr.push(id) : this.showArr.splice(idx, 1)
    },
    handleReply(item) {
      this.$bus.$emit('showDialogAnswer', item)
    },
  },
}
</script>
<style scoped lang="scss">
.qa-list {
  position: relative;
  .qa-btn {
    position: absolute;
    right: 10px;
    top: 0px;
  }
  .lookme {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    i {
      margin-right: 20px;
      cursor: pointer;
    }
    span {
      margin-left: 10px;
    }
  }
  .qa-item {
    position: relative;
    padding: 20px;
    min-height: 100px;
    margin-bottom: 10px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
    .img-box {
      position: absolute;
      left: 50px;
      top: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .qa-info {
      padding-left: 100px;
      h2 {
        color: #333;
        font-size: 18px;
        line-height: 1.5;
      }
      ul {
        margin: 10px 0;
        padding-left: 10px;
        border-left: 3px solid #ccc;
        li {
          border-top: 1px dashed #eee;
          &:nth-child(1) {
            border-top: 0 none;
          }
          p {
            font-size: 14px;
            color: #666;
          }
          .user-info {
            padding-top: 10px;
            span.el-avatar {
              float: left;
              // margin-right: 10px;
            }
            .user-time,
            .user-name {
              font-size: 12px;
              color: #999;
              margin-left: 10px;
            }
          }
          div {
            font-size: 14px;
            color: #333;
          }
        }
      }
      .qa-other {
        color: #999;
        .show-answer {
          cursor: pointer;
        }
        .reply-btn {
          text-align: right;
          margin-left: 10px;
          color: #333;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: var(--colorH1);
          }
        }
      }
    }
  }
}
</style>